<script setup lang="ts" name="SignaTure">
import { ref, reactive } from "vue"
import { ElMessage } from "element-plus"
const obj = reactive({
  lineWidth: 8, // 画笔粗细
  lineColor: "#000", // 画笔颜色
  bgColor: "#fff", // 画布背景颜色
  isCrop: false, // 是否剪裁
  showViewer: false, // 预览签名
  resultImg: "" // base64图片
})
const esign = ref()
const handleReset = () => {
  esign.value.reset() // 清空画布
}
const handleGenerate = () => {
  esign.value
    .generate()
    .then((res: string) => {
      console.log(res)
      obj.resultImg = res // 得到了签字生成的base64图片
      obj.showViewer = true
    })
    .catch(() => {
      // 没有签名，点击生成图片时调用
      ElMessage({
        message: "未签名!",
        type: "warning"
      })
    })
}
</script>
<template>
  <div class="card content-box">
    <div>
      <vue-esign
        class="content"
        ref="esign"
        :width="1200"
        :height="480"
        :line-width="obj.lineWidth"
        :line-color="obj.lineColor"
        :bg-color="obj.bgColor"
      />
    </div>
    <div class="flex">
      <el-button type="danger" @click="handleReset">重签</el-button>
      <el-button type="primary" @click="handleGenerate">预览</el-button>
      <el-button type="success" @click="handleGenerate">确认</el-button>
    </div>
    <el-image-viewer
      v-if="obj.showViewer"
      :hide-on-click-modal="true"
      @close="
        () => {
          obj.showViewer = false
        }
      "
      :url-list="[obj.resultImg]"
    />
  </div>
</template>

<style scoped lang="scss">
@import "./SignaTure.scss";
</style>
